<template>
  <view class="">
    <view class="detail-comment">
      <view class="comment-contentOne">
        <view class="vfor">
          <view class="item_wrap">
            <view class="ileft">
              <view class="avatar">
                <u-image width="70rpx" height="70rpx" shape="circle" :src="parentComment.avatar"></u-image>
              </view>
              <view class="nick">
                <text>{{parentComment.nickname}}</text>
              </view>
            </view>
          </view>
          <view class="ccontent">
            {{parentComment.content}}
          </view>
        </view>
      </view>
      <view class="comment-title">
        <view class="reply-box">
          评论区
        </view>
        <view class="comment-content">
          <view class="vfor" v-for="(item,index) in childComment" :key="index">
            <view class="item_wrap">
              <view class="ileft">
                <view class="avatar">
                  <u-image width="70rpx" height="70rpx" shape="circle" :src="item.avatar"></u-image>
                </view>
                <view class="nick">
                  <text>{{item.nickname}}</text>
                </view>
              </view>
            </view>
            <view class="ccontent">
              {{item.content}}
            </view>
          </view>
        </view>
      </view>

    </view>
    <!--  -->
    <view class="writeComments">
          <u-input v-model="writeContent" type="text" placeholder="写评论..." confirm-type="send" @confirm="writeComment"
            class="writeContent"></u-input>
      <view @click="writeComment()" class="but" v-if="writeContent.length>0">发送</view>
        </view>
    <u-toast ref="uToast" />
  </view>

</template>

<script>
  export default {
    data() {
      return {

        articleStatus: {
          likes: 1,
          collections: 1,
          follow: 1,
        },
        writeContent: '', //评论内容
        parentComment: {},
        childComment: [],
		cid:"",
		commentType:"",
      }
    },
    onLoad(options) {
      this.cid = options.cId;
	  this.commentType = options.commentType
      this.init();
    },
    methods: {
      init() {
        this.$u.api.getPCommentsByArticleIdChil({
            cId: this.cid,
          })
          .then(res => {
            if (res.code != '200') return this.$u.toast(res.msg);
            this.parentComment = res.data.parentComment;
            this.childComment = res.data.childComment;
          });
      },
      writeComment() {
       // if(!this.$store.state.isLogin) return  this.$u.toast("请登录");
        var login=this.checkLogin();
        if(!login)
        {
        	return false;
        }
		let param = {
          articleId: this.parentComment.articleId,
          content: this.writeContent,
          commentParentid: this.cid,
          commentType: this.commentType
        }
        this.$u.api.articleComments.saveWindComment(param)
          .then(res => {
            if (res.code != '200') return this.$u.toast(res.msg);
            this.writeContent = '';
            this.$refs.uToast.show({
              type: 'success',
              title: '评论成功'
            })
            this.init();
          });
      },

    }
  }
</script>

<style lang="scss">
  .detail-comment {
    margin: 20rpx;

    // 评论区头
    .comment-title {

      .reply-box {
        font-size: 15px;
        padding: 10px 10px;
        border-bottom: 2px solid #000000;
      }
    }

    .comment-contentOne {
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;

      .vfor {
        .item_wrap {
          margin-top: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ileft {
            display: flex;
            align-items: center;

            .avatar {
              margin-right: 15rpx;
            }

            .nick {
              text {
                font-weight: bold;
              }
            }
          }

          .iright {
            display: flex;

            .likes {
              margin-right: 10rpx;

              text {
                margin-left: 5rpx;
              }
            }

            .unlikes {
              text {
                margin-left: 5rpx;

              }
            }
          }
        }

        .ccontent {
          margin-left: 85rpx;
          font-size: 27rpx;
        }

        .reply {
          margin-left: 85rpx;
          margin-top: 20rpx;

          text {
            background-color: #F4F4F4;
            padding: 5rpx 50rpx 8rpx 20rpx;
            margin-right: -30rpx;
            border-radius: 20rpx;
            font-size: 27rpx;
          }
        }
      }
    }

    // 评论区内容
    .comment-content {
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      margin-bottom: 100rpx;

      .vfor {
        .item_wrap {
          margin-top: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ileft {
            display: flex;
            align-items: center;

            .avatar {
              margin-right: 15rpx;
            }

            .nick {
              text {
                font-weight: bold;
              }
            }
          }

          .iright {
            display: flex;

            .likes {
              margin-right: 10rpx;

              text {
                margin-left: 5rpx;
              }
            }

            .unlikes {
              text {
                margin-left: 5rpx;

              }
            }
          }
        }

        .ccontent {
          margin-left: 85rpx;
          font-size: 27rpx;
        }

        .reply {
          margin-left: 85rpx;
          margin-top: 20rpx;

          text {
            background-color: #F4F4F4;
            padding: 5rpx 50rpx 8rpx 20rpx;
            margin-right: -30rpx;
            border-radius: 20rpx;
            font-size: 27rpx;
          }
        }
      }
    }
  }

  .writeComments {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 750rpx;
    height: 100rpx;
    align-items: center;
    background-color: #fff;
    border-top: 1rpx solid #eee;

    .writeContent {
      background-color: #f4f4f4;
      height: 60rpx;
      align-items: center;
      border-radius: 30rpx;
      padding-left: 50rpx !important;
      width: 400rpx;
    }

    .write_warp {}

    .zan {
      width: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .shoucang {
      width: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .share {
      button {
        background-color: rgba($color: #000000, $alpha: 0);
      }

      button:after {
        border: none;
      }
    }
	
	.but{
	  color: white;
	  background: #0089ff;
	  border-radius: 50vw;
	  height: 60rpx;
	  width: 120rpx;
	  line-height: 60rpx;
	  text-align: center;
	  margin-right: 5vw;
	 }
  }
</style>
